<template>
  <div class="synthesize">
    <div class="topic" v-for="(item, index) in synthesizeTopic">
      <p class="synthesize_num">
        {{index + 1}}.
        <span class="mold">（综合题 {{item.sorce}} 分）</span>
      </p>

      <p class="name" v-html="item.topicSubject"></p>

      <div class="select">
        <textarea
          name="synthesize"
          cols="80"
          rows="10"
          class="synthesizes"
          @change="onChange(index)"
          @loadeddata="load(index)"
          :value="item.submitAnswer[0]"
        ></textarea>
        <!-- <tinymce :width="200" :height="100" menubar></tinymce> -->

        <!-- <el-input
                class="textarea"
                type="textarea"
                :placeholder="'第' + (index + 1) + '空/选项'"
                v-html="cusmer.topicOption[index]"
                v-if="!(indexControll == index)"
              >
              </el-input>

              <tinymce
                v-else
                v-model="cusmer.topicOption[index]"
                :height="100"
                menubar=""
        ></tinymce>-->
      </div>

      <div class="correctAnswer" v-show="isSubmit">
        正确答案:
        <span
          class="correctOption"
          v-html="item.answers[0]"
          :class="{'right': item.situation == '1'}"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '@/common/bus';

export default {
  name: 'synthesize',
  data() {
    return {
      flag: false,
      isSubmit: false,
      topicType: '',
    };
  },
  props: {
    synthesizeTopic: {
      type: Array,
      default: [],
    },
  },
  created() {
    this._submited();
  },
  mounted() {},
  methods: {
    onChange(index) {
      const synthesizes = document.querySelectorAll('.synthesizes');

      if (synthesizes[index].value != '') {
        this.flag = true;
      } else {
        this.flag = false;
      }

      var synthesizeTopicOk = {
        num: index + 1,
        finish: this.flag,
        topicList: {
          id: this.synthesizeTopic[index].id,
          kind: '4',
          submitAnswer: [synthesizes[index].value],
        },
      };

      Bus.$emit('synthesizeTopic', synthesizeTopicOk);
    },

    load(index) {
      console.log(12);
    },

    _submited() {
      Bus.$on('submit', () => {
        this.isSubmit = true;
      });
    },
  },
  beforeDestroy() {
    Bus.$off('submit');
  },
};
</script>

<style scoped>
.synthesize .topic {
  margin-bottom: 50px;
}
.synthesize .mold {
  color: #a8a8b3;
}
.synthesize .name {
  width: 800px;
  line-height: 24px;
  margin-bottom: 20px;
}
.synthesize .select .synthesizes {
  outline: none;
  min-width: 70%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #181e33;
  border-radius: 10px;
  border-color: #a8a8b3;
  box-sizing: border-box;
  resize: none;
}
.synthesize .select .synthesizes:focus,
.synthesize .select .synthesizes:hover {
  border-color: #6486ff;
}
.correctAnswer {
  text-indent: 1rem;
  font-size: 16px;
  padding: 4px 10px;
  background-color: #f2f4f7;
  border-left: 1px solid #6486ff;
  user-select: text;
}
.correctAnswer .correctOption {
  display: inline-block;
  margin-right: 8px;
  color: #f00;
}
.correctAnswer .correctOption p span {
  color: #f00;
}
.right {
  color: #6486ff !important;
}
</style>